<template>
    <div class="recruitmentManagement">
        <van-nav-bar title="工资条模版" left-arrow @click-left="$router.back()">
<!--            <template #right>
                <van-icon style="" name="search" size="20" @click="goNeedPage_recruitStaff('search')" />
            </template>-->
        </van-nav-bar>
        <div>
            <van-radio-group v-model="radio" class='radio-box' direction="horizontal" value="radio">
                <div v-for="(item,index) in listData" :key="index" class="template-row">
                    <van-radio :name="item.category.id" class='radio-flex' @click="toRadio(item)">
                        {{item.category.categoryname}} {{item.category.defaultdata ? (item.category.jobuserid?'[个人模板]':'[招聘信息模板]'):''}}
                    </van-radio>
                    <div class="template-row-btns">
                        <van-button @click='setSalaryCategoryToJob(item.category.id, item.category.categoryid, item.category.categoryname)' class='template-row-btn' plain
                            square size="mini" type="info">设为招聘信息模板
                        </van-button>
                        <van-button
                            @click='setDefault(item.category.id, item.category.categoryid, item.category.categoryname)'
                            class='template-row-btn' plain square size="mini" type="info">设为默认模板
                        </van-button>
                    </div>
                </div>
            </van-radio-group>
            <div style="height:50px"></div>
            <div class='btn-box'>
                <van-button @click='saveUp' class='btn' round block type="info" native-type="submit">使用临时模板</van-button>
                <van-button class="btn add" @click="goTab(item)" round block type="info" plain
                    v-for="(item, index) in navList" :key="index">
                    <van-icon name="plus" size="25" />
                    {{item.text}}
                </van-button>
            </div>
        </div>
    </div>
</template>

<script>
import comFilterMenu from '../../../components/comFilterMenu'
import comJobItem from '../../../components/comJobItem'
import {obj} from '../../../constants/comUtils'

import quickMenu from './common/quickMenu'
import lend from '@/assets/img/myCompany/lend.png'
import more from '@/assets/img/myCompany/more.png'
import salary from '@/assets/img/myCompany/salary.png'
import signUp from '@/assets/img/myCompany/signUp.png'
import work from '@/assets/img/myCompany/work.png'

import {reqGetlistsOwner} from '@/api/myCompany.js'
import {Toast} from 'vant'

const rightOptionObj = {
  read: '离职',
  unread: '在职',
  zili: '自离'
}
const rightOption = [
  {text: '在职', value: 'unread'},
  {text: '离职', value: 'read'},
  {text: '自离', value: 'zili'}
]

export default {
  name: 'salaryModel',
  components: {
    quickMenu,
    comJobItem,
    comFilterMenu
  },
  data() {
    return {
      radio: '',
      defaultCategoryId: '',
      selectCategoryId: '',
      rightValue: 'unread',
      titleName: '报名未读',
      rightOption,
      rightOptionObj,
      showOverlay: false,
      listData: [],
      navList: [
        {
          id: 1,
          text: '新建',
          icon: signUp
        }
      ],
      needObj: obj,
      needObjTotal: '',

      /**
       * quickMenu 组件需要，暂时保留
       */
      icons: ['fa fa-github', 'fa fa-comment', 'fa fa-code', 'fa fa-envelope'],
      list: [{isLink: false}, {isLink: true, url: '/mime'}, {isLink: true, url: '/'}, {isLink: false}]
    }
  },
  async created() {
    const comMesRes = await this.$api.myCompany.reqGetlistsOwner()
    if (comMesRes.code === 200) {
      this.needObj = comMesRes.data.items
      this.needObjTotal = comMesRes.data.count
    }
    this.getList()
  },
  methods: {
    async getList() {
      let data = {
        CompanyID: this.$route.params.companyID.slice(10),
        JobUserId: this.$route.query.jobuserid,
        JobId: this.$route.query.jobid
      }

      const result = await this.$api.myCompany.getSalaryCategory(data)
      if (result.code == 200) {
        this.listData = result.data.data
        //radio勾选的默认值
        let firstItemId = result.data.data.length > 0 ? result.data.data[0].category.id : ''
        let firstItemCategoryId = result.data.data.length > 0 ? result.data.data[0].category.categoryid : ''
        this.radio = result.data.default.defaultId ? result.data.default.defaultId : firstItemId
        this.defaultCategoryId = result.data.default.defaultCategoryid
          ? result.data.default.defaultCategoryid
          : firstItemCategoryId
        this.selectCategoryId = this.defaultCategoryId
      }
    },
    async saveUp() {
      let categoryId = this.selectCategoryId
      /*
       * 为空时说明当前模板没有选择，不发送请求
       */
      if (categoryId.trim() != '') {
        this.$router.push({
          path: `/myCompany/insertSalary`,
          query: {
            jobuserid: this.$route.query.jobuserid,
            companyid: this.$route.params.companyID.slice(10),
            jobid: this.$route.query.jobid,
            categoryid: categoryId,
          }
        })
      } else {
        Toast.fail('请先选择要操作的模板！')
      }
    },
    toRadio(item) {
      this.selectCategoryId = item.category.categoryid
    },
    goNeedPage_recruitStaff(val) {
      const keyWord = 'recruitStaff'
      if (val === 'search') {
        this.$router.push({
          path: `/searchRecords/${keyWord}`
        })
      }
    },
    goTab(data) {
      if (data.id == 1) {
        this.$router.push({
          path: `/myCompany/addsalaryModel/companyID=${this.$route.params.companyID.slice(10)}`,
          query: {jobid: this.$route.query.jobid, jobuserid: this.$route.query.jobuserid}
        })
      }
    },
    selected($event) {},

    toGetFilterMenuValue_recruitmentManagement(val) {
      console.log('传值---读不读', val)
      this.titleName = this.rightOptionObj[val]
    },

    // 设为默认模板
    setDefault(id, categoryid, CategoryName) {
      let that = this
      let params = {
        CompanyID: this.$route.params.companyID.slice(10),
        JobId: this.$route.query.jobid,
        JobUserId: this.$route.query.jobuserid,
        id: id,
        CategoryId: categoryid,
        CategoryName: CategoryName
      }

      this.$api.myCompany.setdefaultSalaryCategory(params).then(res => {
        if (res.code === 200 && res.data == true) {
          Toast('默认模板设置成功！')
          setTimeout(() => {
            that.getList()
          }, 500)
        } else {
          Toast('操作失败请重试！')
        }
      })
    },

    // 设置为招聘工资模板
    setSalaryCategoryToJob(id, categoryid, CategoryName) {
      let that = this
      let params = {
        CompanyID: this.$route.params.companyID.slice(10),
        JobId: this.$route.query.jobid,
        JobUserId: this.$route.query.jobuserid,
        id: id,
        CategoryId: categoryid,
        CategoryName: CategoryName
      }

      this.$api.myCompany.setSalaryCategoryToJob(params).then(res => {
        if (res.code === 200 && res.data == true) {
          Toast('默认模板设置成功！')
          setTimeout(() => {
            that.getList()
          }, 500)
        } else {
          Toast('操作失败请重试！')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.recruitmentManagement {
  width: 100%;
  .over_layer {
    margin-top: 46px;
    height: 100%;
    .layer {
      width: 40%;
      font-size: 14px;
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }
  /deep/ .quick_links {
    .nut-fixednav.active .fixed-list {
      right: 0;
    }
    .quick_links_detail {
      .fixed-list {
        right: -110%;
        li {
          min-width: 1.56rem;
          img {
            /*display: none;*/
          }
          span {
            /*border: 1px solid blue;*/
          }
        }
      }
    }
  }
  .template-row {
    width: 100%;
    border-bottom: 1px solid #ccc;
    display: flex;
    position: relative;
    justify-content: space-between;

    .template-row-btns {
      display: inline-flex;
      justify-content: flex-end;
    }

    .template-row-btn {
      display: inline-block;
      margin: auto;
      min-width: 1.7rem;
      padding: 0.33rem 0;
    }

    .template-row-btn:last-child {
      margin-left: 10px;
    }
  }
  .radio-box {
    // width:100%;
    padding: 10px;
    .radio-flex {
      width: 68%;
      height: 40px;
    }
  }
  .btn-box {
    position: fixed;
    width: 100%;
    background: #fff;
    padding: 5px 15px;
    box-sizing: border-box;
    bottom: 0;
    display: flex;
    .add {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30% !important;
      margin-left: 10px !important;
      white-space: nowrap;
      flex-shrink: 0;
      span {
        display: flex;
        align-items: center;
      }
      i {
        vertical-align: middle;
      }
    }
    .btn {
      margin: 0 auto;
      height: 35px;
    }
  }
}
</style>
